<template>
  <el-dialog
    :visible.sync="visible"
    @close ='$emit("update:dialogVisible", false)'
    top='18vh'
    custom-class="educationDialogForm"
  >
    <el-form
      ref="educationDialogForm"
      :model="form"
      :rules='formDialogRules'
    >

      <el-form-item
        prop='educationTitle'
        align='center'
      >
        <el-input 
          placeholder="请输入自定义类名称"
          style="width:200px;"
          v-model.trim='form.educationTitle'>

        </el-input>

      </el-form-item>

      <el-form-item
        prop='selected'
        style="margin-top:30px"
      >
        <el-checkbox-group v-model='form.selected'>
          <span class="select"  v-for='(k,i) in selectList'>
            <el-checkbox :key='Math.random()' :label='k.value'>{{k.label}}</el-checkbox>
          </span>
        </el-checkbox-group>
      </el-form-item>
    </el-form>



    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('educationDialogForm')">保 存</el-button>
    </span>
    
  </el-dialog>
</template>

<script>
import {
  educationSelectList
} from './selectList'
import Bus from './bus'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    defaultTitle: {
      type: String,
      default: ''
    },
    defaultSelected: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    const rule_selected = (rule, value, callback) => {

      if (!value.length) {

        return callback(new Error('至少选择一个选项'))
      }
      callback()
    }

    const rule_educationTitle = (rule, value, callback) => {
      if (this.form.selected.length > 1 && !value) {
        return callback(new Error('类名不能为空'))
      }
      callback()
    }
    return {
      visible: false,
      selectList: educationSelectList,
      form: {
        educationTitle: '',
        selected: [],
      },
      formDialogRules: {
        educationTitle: [{ required: true, validator: rule_educationTitle, trigger: 'submit' }],
        selected: [{ required: true, validator: rule_selected, trigger: 'submit' }]
      },
    }
  },
  watch: {
    dialogVisible (newValue) {
      this.form.selected = this.defaultSelected
      this.form.educationTitle = this.defaultTitle
      this.visible = newValue
    }
  },
  methods: {

    helpWriteTitle () {
      if (this.form.selected.length === 1 && !this.form.educationTitle) {

        const titleName = educationSelectList
          .filter(ele => ele.value === this.form.selected[0])[0].label
        this.form.educationTitle = titleName
      }
    },

    emitData () {
      const selected = this.form.selected
      const title = this.form.educationTitle
      this.$emit('getEducationData', { selected, title })
    },

    submitForm (formName) {
      this.$refs[formName].validate((valid) => {

        if (valid) {
          this.helpWriteTitle()
          this.emitData()
          this.visible = false
        }
      })
    },
  },
}
</script>

<style scoped>
.select {
  display: inline-block;
  padding: 0 10px;
  width:160px;
}

.select:last-of-type {
  padding-right: 0;
}
</style>

<style>

.educationDialogForm .el-form-item__error {
  left: 50%;
  transform: translate(-50%, 4px);
}
</style>
